<template>
    <view class="coupons">
        <!-- <view class="coupons_navigation">
             <view class="color_org">未使用(<text>0</text>)</view>
             <view>已使用(<text>0</text>)</view>
             <view>已过期(<text>0</text>)</view>
         </view> -->

        <!--暂无数据显示-->
        <placeholder wx:if="{{is_empty}}" message.sync="暂无发现数据"></placeholder>
        <view wx:if="{{!is_empty}}" class="coupons_ticket" wx:for="{{coupons}}" wx:key="index,item">
            <view class="coupons_ticket_bgi" style="background:url({{item.couponType == '现金优惠' ? 'https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/publish/moren.png' : 'https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/publish/rabit.png'}}) no-repeat center center / 100% 100%">
                <text>{{item.couponType == "现金优惠" ? "￥"+item.couponAmount : ""}}</text>
            </view>
            <view style="background: #fff;">
                <view class="coupons_use">
                    <view class="tongyong">
                        <text class="tongyong_title">{{item.couponType == "现金优惠" ? '现金抵用券' : item.couponType}}</text>
                        <text>{{item.couponType == "现金优惠" ? "" : "全国通用"}}</text>
                    </view>
                    <view wx:if="{{bShowBind}}" @tap="getThisCou" data-index="{{index}}">
                        <view class="use_button">立即使用</view>
                    </view>
                </view>
                <view class="coupons_tiem">
                    <text>{{item.id}}</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    import wepy from 'wepy'
    import api from '@/api/api'
    import tip from '@/utils/tip'
    import {USER_ID, CHOOSECOU} from '@/utils/constant'
    import Placeholder from '../../components/common/placeholder'

    export default class coupons extends wepy.page {
        config = {
            // 配置当前页面
            navigationBarTitleText: '我的优惠券' // 头部标题
        }
        components = {
            placeholder: Placeholder
        }
        data = {
            avatarUrl: '',
            nickName: '',
            bShowBind: false,
            coupons: [],
            userId: '',
            is_empty: false
        }
        methods = {
            // 方法
            showTypeName(name) {
                switch (name) {
                    case 'FREE_SHIP':
                        return '免运费'
                    case 'REE_DISPOSIT':
                        return '免押金'
                    case 'FREE_BOND':
                        return '免担保金'
                    case 'CASH_DISCOUNT':
                        return '现金优惠'
                    case 'FREE_IDENTIFY':
                        return '免鉴定金'
                }
            },
            getThisCou(e) {
                const t = this
                let i = e.currentTarget.dataset.index
                wx.setStorageSync(CHOOSECOU, t.coupons[i])
                wx.navigateBack()
            }
        }

        // 获取所有优惠券
        async Coupons() {
            let self = this
            api
                .listUserCouponUsingGET({}, '/app/coupon/listUserCoupon/' + self.userId)
                .then(function (res) {
                    if (res.data.code == 0) {
                        self.coupons = res.data.data;
                        for (let one of self.coupons) {
                            one.couponType = self.methods.showTypeName(one.couponType)
                        }
                        self.$apply()
                    } else {
                        tip.error(res.data.msg)
                    }
                })
        }

        /**
         * 获取用户可用的优惠券
         * @returns {Promise.<void>}
         * @constructor
         */
        async chooseCouponFun(r) {
            let self = this
            let a = await api.listUserCouponByType({
                query: {
                    couponType: r,
                    userId: self.userId
                }
            })
            if (a.data.code == 0) {
                self.bShowBind = true;
                let c = a.data.data;
                if(c.length==0){
                    self.is_empty = true;
                }else {
                    self.is_empty = false;
                    self.coupons = c;
                    for (let one of self.coupons) {
                        one.couponType = self.methods.showTypeName(one.couponType)
                    }
                }
                self.$apply();
            } else {
                tip.error(res.data.msg)
            }
        }

        onLoad(r) {
            const t = this
            t.userId = wepy.getStorageSync(USER_ID)
            if (r.type) {
                t.chooseCouponFun(r.type)
            } else {
                t.Coupons()
            }
        }

        events = {}
    }
</script>
<style lang="less">
.coupons {
    .coupons_navigation {
        display: flex;
        view {
            background: #fff;
            width: 33.3%;
            padding: 20rpx 0;
            text-align: center;
            border-right: 1px solid #ddd;
        }
        .color_org {
            color: orange;
        }
    }
    .coupons_ticket {
        position: relative;
        display: flex;
        margin: 40rpx 30rpx;

        > view {
            width: 440rpx;
            height: 200rpx;
            position: relative;
        }
        .coupons_ticket_bgi {
            width: 250rpx !important;
            background: url();

            text {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
                font-size: 50rpx;
            }
        }
        .coupons_use {
            width: 100%;
            .tongyong {
                display: table-cell;
                width: 100%;
                text-align: center;
                padding-top: 40rpx;
                vertical-align: middle;
                > text:first-child {
                    color: #333;
                    font-weight: 900;
                }
                > text:last-child {
                    color: #666;
                    font-size: 24rpx;
                }
                text {
                    display: block;
                }
            }
            > view:last-child {
                padding-top: 44rpx;
                vertical-align: middle;
                display: table-cell;
                width: 500rpx;
                .use_button {
                    width: 140rpx;
                    height: 45rpx;
                    border: 1px solid orange;
                    text-align: center;
                    line-height: 45rpx;
                    border-radius: 12rpx;
                    font-size: 24rpx;
                    color: orange;
                }
            }
        }
        .coupons_tiem {
            border-top: 1px solid #ddd;
            position: absolute;
            text-align: center;
            bottom: 0;
            right: 0;
            width: 440rpx;
            text {
                display: inline-block;
                padding: 12rpx 20rpx;
                font-size: 24rpx;
                color: #999;
            }
        }
    }
}
</style>
